<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>${s_UserPharmacy.pharmacy.name}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResources.jsp" %>

<fmt:message key="form.selected" var="selected"/>	

<script type="text/javascript">
$(function() {
    
	  $.datepicker.regional['es'] = 
	  {
	  closeText: 'Cerrar', 
	  prevText: 'Previo', 
	  nextText: 'Próximo',
	  
	  monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
	  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
	  monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
	  'Jul','Ago','Sep','Oct','Nov','Dic'],
	  monthStatus: 'Ver otro mes', yearStatus: 'Ver otro año',
	  dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
	  dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb'],
	  dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
	  dateFormat: 'dd/mm/yy', firstDay: 0, 
	  initStatus: 'Selecciona la fecha', isRTL: false};
	  $.datepicker.setDefaults($.datepicker.regional['es']);
});
	
$(function(){
    $("#personalArchingDate").datepicker({
        minDate: -2,
        showButtonPanel: true,
        hideIfNoPrevNext: true
    });
})	
	
$(document).ready(function(){
	$('.numbersOnly').keyup(function () {
        if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
           this.value = this.value.replace(/[^0-9\.]/g, '');
        }
    });
	$('.lettersOnly').keyup(function () {
        if (this.value != this.value.replace(/[^A-Za-z\s]/g, '')) {
           this.value = this.value.replace(/[^A-Za-z\s]/g, '');
        }
    });
});	
	
	function searchByDate(){		
		var dateTemp = $("#personalArchingDate").val();
		if(dateTemp != ''){
			$.ajax({ 
				type: "GET",
				url	: 'personalArchingSearchByDate',
		   	   	dataType: "json",		
		        data: {dateSearch:dateTemp},
		   	    success:function(data){
		   	    	showTablePersonalArching(data);
		   		}, 
		   		error: 	function(){alert('Error en request..');} }); 
		}else{
			alert('Seleccione el Campo');
		}	
	}

	function showTablePersonalArching(data){
		var html='';
		/* html='	<fieldset>'+		
			'		<legend><fmt:message key="title.dataBuy"/></legend>'+ */
		html='		<table class="tabla_decorado" style="width: 100%">'+
			'			<thead>'+
			'				<tr>'+
			'					<th width="3%" class="th_decoradoRowspan"><fmt:message key="table.num"/></th>'+	
			'					<th width="32%" class="th_decoradoRowspan"><fmt:message key="table.operation"/></th>'+
			'					<th width="20%" class="th_decoradoRowspan"><fmt:message key="table.numBill"/></th>'+
			'					<th width="15%" class="th_decoradoRowspan"><fmt:message key="table.entry"/></th>'+
			'					<th width="15%" class="th_decoradoRowspan"><fmt:message key="table.egress"/></th>'+
			'					<th width="15%" class="th_decoradoRowspan"><fmt:message key="table.total"/></th>'+
			'				</tr>'+
			'			</thead>'+
			'			<tbody>';
		if(data.length > 0){
		var valuesTotal = 0;
		for (var i = 0; i < data.length; i++) {
			var obj = data[i];
			valuesTotal=valuesTotal+obj.amount;
			html+='			<tr class="tr_decorado">'+				
				'				<td class="th_decorado" style="text-align: center">'+(i+1)+'</td>'+
				'				<td class="th_decorado" style="text-align: center">'+obj.operationId.name+'</td>'+
				'				<td class="th_decorado" style="text-align: center">numero de factura</td>'+
				'				<td class="th_decorado" style="text-align: center">'+obj.amount+'</td>'+
				'				<td class="th_decorado" style="text-align: center"></td>'+
				'				<td class="th_decorado" style="text-align: center"></td>'+
				'			</tr>';
		}
		html+='				<tr class="tr_decorado">'+				
			'					<td class="th_decorado" style="text-align: right" colspan="3"><fmt:message key="table.amountTotal"/></td>'+
			'					<td class="th_decorado" style="text-align: center">'+valuesTotal+'</td>'+
			'					<td class="th_decorado" style="text-align: center"></td>'+
			'					<td class="th_decorado" style="text-align: center">'+valuesTotal+'</td>'+
			'				</tr>';	
		}else
			html+='		<tr class="tr_decorado"><td class="td_decorado" colspan="6" style="text-align:center"><span style="color:red"><fmt:message key="show.noExistSellSearchProducts"/></span></td></tr>';
		html+='			</tbody>'+
			'		</table>';
	//		'	</fieldset>';
		$("#showList").html(html);
	}

</script>
</head>

<body>
<div id="top-wrap">
	<%@include file="../../head.jsp"  %>
	<div id="bodySpace">
		
	    <div class="clearfix" id="middle" style="position: absolute">  <!-- aqui va la ruta -->
	        <!-- aqui va el arbol de entrada -->
	        <div id="breadcrumb">
	            <ul>
                	<li><a href="<spring:url value="/mainFront?" htmlEscape="true" />">Home</a></li>	
                    <li><span style="color:#666"><fmt:message key="title.reports"/></span></li>
                    <li class="current-page"><span class="end"><span class="middle"><fmt:message key="title.personalArching"/></span></span></li>
                </ul>
	        </div>
	    </div>
	    
	    <div id="principal">
            <!-- izquierda -->
            <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                <div class="izq">
					<%-- <%@include file="../../bodyIzq.jsp" %>	 --%>
                </div>
                
                <div class="der" style="border: 0px solid">
					<h2 class="decorado"><fmt:message key="title.personalArching"/></h2></br></br> 
					
					<div id="imgLoad" style="float: left;width: 100%;display: none;"><img src="<c:url value="/resources/images/imgLoad/ajax-loader.gif" />" width="32" height="32" alt="ajax-loader.gif" style="position:absolute; top:30%; left:50%;"/></div> 
					<div id="listReportsPersonalArching">
						<div align="center">
							<label for="personalArchingDate" ><b><fmt:message key="form.billDate"/> :</b></label>					
							<input type="text" name="personalArchingDate" id="personalArchingDate" style="border:1px solid #959595; margin-left:0.2em;" readonly="true" onclick="$(this).datepicker({changeMonth: true,changeYear: true,numberOfMonths: 1});$(this).datepicker().datepicker('show');">
						</div>	
						<br/>					
						<div align="center">
							<input type="button" value="<fmt:message key="button.accept"/>" onclick="searchByDate()" class="boton" title="<fmt:message key="onclick.for"/> <fmt:message key="button.accept"/>"/>																				
						</div>					
						<br/>
						<div id="showList"></div>
					</div>	                                
                </div>
            </div><!--end of leftPan-->
            
            <div class="yDer" style="border: 1px solid #ccc;">
                  <%@include file="../../notices.jsp" %>                       
            </div><!--end of rightPan-->
        </div><!--end main content -->
	</div>
</div>
</body>
</html>
